﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECShop首页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.0/css/jquery-weui.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/Swiper/4.1.0/css/swiper.min.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/theme-color.css">
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<header class="zyw-header">
    <div class="zyw-container white-color">
        <div class="head-l"><i class="head-l-svg" aria-hidden="true"></i></div>
        <div class="head-search">
            <i class="fa fa-search" aria-hidden="true"></i>
            <input type="text" placeholder="输入您当前要搜索的商品" class="white-color">
        </div>
        <div class="head-r"><a href="cart.html"><i class="head-r-svg" aria-hidden="true"></i><i class="head-length">8</i></a></div>
    </div>
</header>
<footer class="zyw-footer">
    <div class="zyw-container white-bgcolor clearfix">
        <div class="weui-tabbar">
            <a href="index.html" class="weui-tabbar__item weui-bar__item--on">
                <div class="weui-tabbar__icon">
                    <img src="picture/foot-1-1.svg" alt="">
                </div>
                <p class="weui-tabbar__label">首页</p>
            </a>
            <a href="class.html" class="weui-tabbar__item">
                <div class="weui-tabbar__icon">
                    <img src="picture/foot-2.svg" alt="">
                </div>
                <p class="weui-tabbar__label">分类</p>
            </a>
            <a href="find.html" class="weui-tabbar__item">
                <div class="weui-tabbar__icon">
                    <img src="picture/foot-3.svg" alt="">
                </div>
                <p class="weui-tabbar__label">发现</p>
            </a>
            <a href="cart.html" class="weui-tabbar__item">
                <span class="weui-badge" style="position: absolute;top: -.4em;right: 1em;">8</span>
                <div class="weui-tabbar__icon">
                    <img src="picture/foot-4.svg" alt="">
                </div>
                <p class="weui-tabbar__label">购物车</p>
            </a>
            <a href="home.html" class="weui-tabbar__item">
                <div class="weui-tabbar__icon">
                    <img src="picture/foot-5.svg" alt="">
                </div>
                <p class="weui-tabbar__label">我的</p>
            </a>
        </div>
    </div>
</footer>
<section class="zyw-container">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="picture/tb2fz6xfgmpmejjy1xbxxcwxvxa_!!2590951958.jpg" alt=""></div>
            <div class="swiper-slide"><img src="picture/tb2z.nkbaagskjjy0fgxxcrqfxa_!!2590951958.jpg" alt=""></div>
            <div class="swiper-slide"><img src="picture/tb2zxvcbjihskjjy0fexxbjtpxa_!!2590951958.jpg" alt=""></div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
    </div>
    <div class="index-class white-bgcolor">
        <div class="weui-flex">
            <div class="weui-flex__item">
                <a href="javascript:;">
                    <div class="index-class-img">
                        <img src="picture/yqyl.png" alt="">
                    </div>
                    <p class="index-class-text">邀请有礼</p>
                </a>
            </div>
            <div class="weui-flex__item">
                <a href="javascript:;">
                    <div class="index-class-img">
                        <img src="picture/cjfl.png" alt="">
                    </div>
                    <p class="index-class-text">春节福利</p>
                </a>
            </div>
            <div class="weui-flex__item">
                <a href="javascript:;">
                    <div class="index-class-img">
                        <img src="picture/kbsc.png" alt="">
                    </div>
                    <p class="index-class-text">酷币商城</p>
                </a>
            </div>
            <div class="weui-flex__item">
                <a href="javascript:;">
                    <div class="index-class-img">
                        <img src="picture/sjtx.png" alt="">
                    </div>
                    <p class="index-class-text">手机通讯</p>
                </a>
            </div>
            <div class="weui-flex__item">
                <a href="javascript:;">
                    <div class="index-class-img">
                        <img src="picture/sjpj.png" alt="">
                    </div>
                    <p class="index-class-text">手机配件</p>
                </a>
            </div>
        </div>
    </div>
    <div class="index-news">
        <div class="news-cont white-bgcolor">
            <strong>最新<em>资讯</em>：</strong>
            <div class="infoBox">
                <ul class="swiper-wrapper">
                    <li class="swiper-slide"><a href="#"><span><i>热</i>酷购商城微信版上线啦！</span></a></li>
                    <li class="swiper-slide"><a href="#"><span>酷购商城微信版上线啦2！</span></a></li>
                    <li class="swiper-slide"><a href="#"><span>马上就要开学了，书包买买买！</span></a></li>
                </ul>
            </div>
            <ul>
                <li><a href=""></a></li>
            </ul>
            <a href="" class="news-more">更多</a>
        </div>
    </div>
    <div class="index-seckill white-bgcolor">
        <div class="seckill-hd">
            <span class="seckill-hd-title red-color"><i class="fa fa-clock-o" aria-hidden="true"></i> 限时秒杀</span>
            <strong>10点场</strong>
            <div id="time"></div>
            <div class="seckill-hd-r">秒抢好货 <i class="fa fa-angle-right theme-color" aria-hidden="true"></i></div>
        </div>
        <div class="seckill-bd">
            <div class="seckill-wares">
                <div class="swiper-wrapper">
                    <div class="swiper-slide seckill-ware">
                        <a href="item.html">
                            <img src="picture/5a27ae6dnc530b5bb.jpg!q70.jpg" alt="">
                            <p class="red-color">￥<strong>3800.00</strong></p>
                            <del>￥12000.00</del>
                        </a>
                    </div>
                    <div class="swiper-slide seckill-ware">
                        <a href="item.html">
                            <img src="picture/5a6935d3n17ca68e7.jpg!q70.jpg" alt="">
                            <p class="red-color">￥<strong>89.90</strong></p>
                            <del>￥128.89</del>
                        </a>
                    </div>
                    <div class="swiper-slide seckill-ware">
                        <a href="item.html">
                            <img src="picture/5a61d929n027318e3.jpg!q70.jpg" alt="">
                            <p class="red-color">￥<strong>1900.00</strong></p>
                            <del>￥2200.00</del>
                        </a>
                    </div>
                    <div class="swiper-slide seckill-ware">
                        <a href="item.html">
                            <img src="picture/5a3a09ben645f27a8.jpg!q70.jpg" alt="">
                            <p class="red-color">￥<strong>35.00</strong></p>
                            <del>￥38.00</del>
                        </a>
                    </div>
                    <div class="swiper-slide seckill-ware">
                        <a href="item.html">
                            <img src="picture/59f1c3a1n2174c8cc.jpg!q70.jpg" alt="">
                            <p class="red-color">￥<strong>38.00</strong></p>
                            <del>￥50.00</del>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="index-show clearfix">
        <div class="col-sm-12 col-xs-12">
            <a class="sc-gPEVay jZmIRd" href=""><img src="picture/5a6991598150a12f8a70b929_1080x292.gif" alt=""></a>
        </div>
        <div class="col-sm-6 col-xs-6">
            <a class="sc-gPEVay jZmIRd" href=""><img src="picture/5a6991fda9fcf8ad18749379_540x280.png" alt=""></a>
        </div>
        <div class="col-sm-6 col-xs-6">
            <a class="sc-gPEVay jZmIRd" href=""><img src="picture/5a6995588150a12cfc124a62_540x280.png" alt=""></a>
        </div>
        <div class="col-sm-4 col-xs-4">
            <a class="sc-gPEVay jZmIRd" href=""><img src="picture/5a6998f98150a12e8a36d67c_360x304.png" alt=""></a>
        </div>
        <div class="col-sm-4 col-xs-4">
            <a class="sc-gPEVay jZmIRd" href=""><img src="picture/5a699928a9fcf805074b5461_360x304.png" alt=""></a>
        </div>
        <div class="col-sm-4 col-xs-4">
            <a class="sc-gPEVay jZmIRd" href=""><img src="picture/5a699957a9fcf80b4d353e8b_360x304.png" alt=""></a>
        </div>
    </div>
    <div class="index-wares">
        <div class="wares-title"><img src="picture/tb1aw9jsvxxxxxqxxxxxxxxxxxx-1500-68.png" alt=""></div>
        <div class="wares-cont">
            <ul class="clearfix">
                <li class="col-sm-6 col-xs-6 ware-box">
                    <a href="item.html">
                        <div class="ware-img">
                            <img src="picture/5a27ae6dnc530b5bb.jpg!q70.jpg" alt="">
                            <span class="ware-vip">vip专享</span>
                        </div>
                        <h3 class="ware-title">Apple 苹果 iPhoneX 全新发布</h3>
                        <p class="ware-des">全网通 64G 深空灰</p>
                        <span class="ware-prince red-color">￥8088.00</span>
                    </a>
                </li>
                <li class="col-sm-6 col-xs-6 ware-box">
                    <a href="item.html">
                        <div class="ware-img">
                            <img src="picture/5a163dd1ne09fad4b.jpg!q70.jpg" alt="">
                            <span class="ware-vip">vip专享</span>
                        </div>
                        <h3 class="ware-title">Apple 苹果 iPhoneX 全新发布</h3>
                        <p class="ware-des">全网通 64G 深空灰</p>
                        <span class="ware-prince red-color">￥8088.00</span>
                    </a>
                </li>
                <li class="col-sm-6 col-xs-6 ware-box">
                    <a href="item.html">
                        <div class="ware-img">
                            <img src="picture/5a546fadn096d46b4.jpg!q70.jpg" alt="">
                            <span class="ware-vip">vip专享</span>
                        </div>
                        <h3 class="ware-title">Apple 苹果 iPhoneX 全新发布</h3>
                        <p class="ware-des">全网通 64G 深空灰</p>
                        <span class="ware-prince red-color">￥8088.00</span>
                    </a>
                </li>
                <li class="col-sm-6 col-xs-6 ware-box">
                    <a href="item.html">
                        <div class="ware-img">
                            <img src="picture/596c8b4en3c8ba6a7.jpg!q70.jpg" alt="">
                            <span class="ware-vip">vip专享</span>
                        </div>
                        <h3 class="ware-title">Apple 苹果 iPhoneX 全新发布</h3>
                        <p class="ware-des">全网通 64G 深空灰</p>
                        <span class="ware-prince red-color">￥8088.00</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</section>
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.min.js"></script>
<script src="https://cdn.bootcss.com/Swiper/4.1.0/js/swiper.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
    // 轮播
    $(document).ready(function () {
        // 顶部轮播图
        var mySwiper = new Swiper ('.swiper-container', {
            // 如果需要分页器
            autoplay:true,
            pagination: {
                el: '.swiper-pagination'
            }
        });
        // 秒杀商品滑动
        var swiper = new Swiper('.seckill-wares', {
            slidesPerView: 3.5,
            spaceBetween: 5,
            freeMode: true
        });
        // 新闻资讯
        var swiper2 = new Swiper('.infoBox', {
            autoplay:true,
            delay: 5000,
            direction: 'vertical'
        });
    })
</script>
</body>
</html>